import React,{Component} from "react";

import "../css/header.css";
import "../css/home_carousel.css";
import {connect} from "react-redux";
import { Carousel, WhiteSpace, WingBlank } from 'antd-mobile';
import $ from "jquery";

class Carouselss extends React.Component {
  state = {
    data: [],
    initialHeight: 200,
  }
  componentDidMount() {
    var that = this;
    $.get('http://localhost:8080/carousel?page=1&count=5', function(res) {
       var getData = JSON.parse(res).data.billboards;
       // console.log(getData);
      that.setState({
        data: getData,
      });
    })
  }
  render() {
    const hProp = this.state.initialHeight ? { height: this.state.initialHeight } : {};
    return (
      <WingBlank>
        <Carousel
          className="my-carousel"
          autoplay={true}
          infinite
          dotStyle={{display:"none"}}
          dotActiveStyle={{display:"none"}}
          selectedIndex={1}
          swipeSpeed={35}
          // beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
          // afterChange={index => console.log('slide to', index)}
        >
          {
            this.state.data.map(function(item,index){
              return (
                  <a href={item.url} key={index}>
                    <img src={item.imageUrl} alt="网络异常，请刷新后再试" />
                  </a>
                )
            })
          }    
        </Carousel>
        <WhiteSpace />
      </WingBlank>
    );
  }
}

var Carousels = connect(
	function(state,ownprops){
		return {
			
		}
	},
	function(dispatch,ownprops){
		return {
			
		}
	}
)(Carouselss);

export default Carousels;
